<template>
  <div class="payment">
    <header>

    </header>

    <section>
      <el-table :data="tableData" border height="100%">
        <el-table-column label="业务类型" prop="businessType" align="center"></el-table-column>
        <el-table-column label="商品名称" prop="goodsName" align="center"></el-table-column>
        <el-table-column label="金额" prop="" align="center">
          <template slot-scope="scope">
            <p>{{scope.row.paidParkAmount | parkAmountFilter}}</p>
            <p>{{scope.row.paidShopAmount | shopAmountFilter}}</p>
          </template>
        </el-table-column>
        <el-table-column label="订单时间" prop="orderTime" align="center"></el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            {{ scope.row.isPaidToPark | paidFilter }}
          </template>
        </el-table-column>
        <el-table-column label="打款流水号" align="center">
          <template slot-scope="scope">
            <p>{{ scope.row.paidToParkTradeNo | parkTradeFilter }}</p>
            <p>{{ scope.row.paidToShopTradeNo | shopTradeFilter }}</p>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" :disabled="(scope.row.isPaidToPark==1)" type="primary" @click="paymentShow = true,row=scope.row">打款</el-button>
          </template>
        </el-table-column>
      </el-table>
    </section>

    <footer>
      <el-pagination
        :current-page="searchForm.currentPage"
        :page-sizes="[10, 15, 20, 30]"
        :page-size="searchForm.pageSize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        align="center"
        style="margin-top: 12px;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </footer>

    <el-dialog :visible.sync="paymentShow" width="500px" :close-on-click-modal="false" :close-on-press-escape="false">
      <toPayment v-if="paymentShow":row="row" @closeDialog="paymentShow = false" @refresh="getPayment" />
    </el-dialog>




  </div>
</template>

<script>
  import toPayment from './components/toPayment.vue'

  export default {
    components: { toPayment },
    filters: {
      parkAmountFilter(amount) {
        if(amount != 0 && amount != null) {
          return '车场：' + amount + '元'
        }
      },
      shopAmountFilter(amount) {
        if(amount != 0 && amount != null) {
          return '商户：' + amount + '元'
        }
      },
      paidFilter(type) {
        return type == 0 ? '未打款' : '已打款'
      },
      parkTradeFilter(code) {
        if(code != null && code != '') {
          return '车场: ' + code
        }
      },
      shopTradeFilter(code) {
        if(code != null && code != '') {
          return '商户: ' + code
        }
      }

    },
    data() {
      return {
        searchForm: {
          currentPage: 1,
          pageSize: 10
        },
        total: 0,
        tableData: [],
        paymentShow: false
      }
    },

    mounted() {
      this.getPayment();
    },

    methods: {
      getPayment() {
        this.$axios({
          method: 'get',
          url: '/shop/shop-order/get-payment',
          params: this.searchForm
        }).then((res) => {
          console.log(res)
          if(res.code == 200) {
            this.tableData = res.data.records;
            this.total = res.data.total;
          }
        })
      },


      // 分页修改每页显示条数
      handleSizeChange(val) {
        this.searchForm.pageSize = val;
        this.getPayment();
      },
      // 分页跳转页面
      handleCurrentChange(val) {
        this.searchForm.currentPage = val;
        this.getPayment();
      }
    }
  }
</script>

<style scoped>
  .payment {
    height: calc(100vh - 84px);
    padding: 10px;
  }

  header {

  }

  section {
    height: calc(100% - 50px);
  }





</style>
